<!--
 * @Description: 图片预览组件
-->
<template>
  <div class="preview-img" v-show="isShow">
    <div class="close" @click="close"><a-icon type="close" /></div>
    <a-icon @click="switchImage(-1)" type="left" />
    <a-icon @click="switchImage(1)" type="right" />
    <div class="image-loop-container" v-if="imgAtts.length">
      <!-- 图片列表 -->

      <img ref="img" :src="imgUrl(currentItem)" @error="defaultErrorImage($event, index)" />
    </div>
    <!-- 底部操作栏 -->
    <div class="footer">
      <ul :class="loadingFailed ? 'no-event' : ''">
        <li>
          <a-tooltip :title="$i18n('print.html.text.msg3')">
            <span @click="zoomOut"><i class="syIcon sy-zoom-out"></i></span>
          </a-tooltip>
        </li>
        <li>{{ scale }}%</li>
        <li>
          <a-tooltip :title="$i18n('print.html.text.msg2')">
            <span @click="zoomIn"><i class="syIcon sy-zoom-in"></i></span>
          </a-tooltip>
        </li>
        <li>
          <a-tooltip :title="$i18n('collaboration.newcoll.common.normal.display')">
            <span @click="recover"><i class="syIcon sy-show-normal"></i></span>
          </a-tooltip>
        </li>
        <li>
          <a-tooltip :title="$i18n('conference.editor.content.rotate')">
            <span @click="rotate"><i class="syIcon sy-repeat"></i></span>
          </a-tooltip>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  /*global hideOfficeObj, showOfficeObj*/
  import { useBaseInfoStore } from '@/store/modules/base-info';
  import { mapState } from 'pinia';
  import globalData from '@/plugins/data';

  export default {
    data() {
      return {
        isShow: false,
        index: 0,
        officeIframeIds: ['officeFrameDiv', 'zwIframe', 'mainbodyFrame', 'officeDivInner'],
        officeIframeObj: null,
        // 加载失败
        loadingFailed: false,
        // 缩放比例
        scale: 100,
        // 旋转角度
        deg: 0
      };
    },
    computed: {
      ...mapState(useBaseInfoStore, ['imgAtts']),
      currentItem() {
        return this.imgAtts[this.index];
      }
    },
    methods: {
      /**
       * @description 打开图片预览组件
       */
      showImg({ fileUrl }) {
        console.log(this.imgAtts, this.index);

        this.isShow = true;
        this.index = this.imgAtts.findIndex((f) => f.fileUrl === fileUrl);
        // office控件相关逻辑
        if (this.officeIframeObj && !globalData.isCap4) {
          this.toggleOfficeIframeObj(true);
        }
        if (hideOfficeObj) hideOfficeObj();
      },
      /**
       * @description 关闭
       */
      close() {
        this.recover();
        this.isShow = false;
        if (this.officeIframeObj) {
          this.toggleOfficeIframeObj(false);
        }
        if (showOfficeObj) showOfficeObj();
      },
      /**
       * @description office相关
       */
      initOfficeObj() {
        this.officeIframeObj = document.getElementById(
          this.officeIframeIds[this.officeIframeIds.findIndex((id) => document.getElementById(id))]
        );
      },
      toggleOfficeIframeObj(isHidden) {
        this.officeIframeObj.style.visibility = isHidden ? 'hidden' : 'visible';
      },
      /**
       * @description 图片路径
       */
      imgUrl(file) {
        const { fileUrl, createdate, filename } = file;
        return `${
          globalData.ctxPath
        }/fileUpload.do?method=showRTE&type=image&fileId=${fileUrl}&createDate=${
          createdate && createdate.substring(0, 10)
        }&filename=${encodeURIComponent(filename)}`;
      },
      /**
       * @description 缩小
       */
      zoomOut() {
        this.scale -= Math.floor(Math.random() * 10 + 1);
        this.scale < 2 && (this.scale = 2);
        this.setScaleAndRotate();
      },
      /**
       * @description 放大
       */
      zoomIn() {
        this.scale += Math.floor(Math.random() * 10 + 1);
        this.setScaleAndRotate();
      },
      /**
       * @description 旋转
       */
      rotate() {
        this.deg += 90;
        this.setScaleAndRotate();
      },
      /**
       * @description 还原
       */
      recover() {
        this.loadingFailed = this.currentItem.loadingFailed || false;
        this.scale = 100;
        this.deg = 0;
        this.setScaleAndRotate();
      },
      /**
       * @description 图片切换监听事件
       */
      switchImage(num) {
        const length = this.imgAtts.length;
        //如果往右到最大就置为0
        if (this.index + num === length) {
          this.index = 0;
          //左边界
        } else if (this.index + num < 0) {
          this.index = length - 1;
        } else {
          this.index += num;
        }
        // 重置
        this.recover();
      },
      /**
       * @description 设置缩放和旋转
       */
      setScaleAndRotate() {
        this.$refs.img.style.transform = `scale(${this.scale / 100}) rotate(${this.deg}deg)`;
      },
      /**
       * @description 图片加载失败，显示404图片
       */
      defaultErrorImage(event, index) {
        // 图片加载失败
        var img = event.target;
        img.src = require('@/assets/images/404.png');
        img.onerror = null; //  防止闪图

        this.imgAtts[index].loadingFailed = true; // 标识加载失败
      }
    }
  };
</script>

<style lang="scss" scoped>
  .preview-img {
    position: absolute;
    z-index: 9999;
    display: flex;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    overflow: scroll;

    .close {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 35px;
      height: 35px;
      font-size: 22px;
      line-height: 35px;
      color: #fff;
      text-align: center;
      background: rgba(0, 0, 0, 0.9);
      border-radius: 50%;
      opacity: 0.5;
      z-index: 10000;
      &:hover {
        cursor: pointer;
      }
    }

    > i {
      @include wh(50, 70, 1, 1);
      @include fb(30);

      position: absolute;
      top: 50%;
      z-index: 2;
      display: block;
      margin-top: -35px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.5);

      &.anticon-right {
        right: 50px;
      }

      &.anticon-left {
        left: 50px;
      }
    }
    .image-loop-container {
      display: flex;
      height: calc(100% - 50px);
      user-select: none;
      align-items: center;

      > img {
        display: block;
        width: auto !important;
        max-height: 100%;
      }
    }

    .footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 50px;
      background: rgba(0, 0, 0, 0.5);

      > ul {
        display: flex;
        font-size: 16px;
        color: #fff;
        justify-content: center;

        > li {
          width: 65px;
          height: 50px;
          line-height: 50px;
          text-align: center;

          > span {
            cursor: pointer;

            > i {
              font-size: 24px;
            }
          }
        }
      }
    }

    .no-event {
      pointer-events: none;
    }
  }
</style>
